<template>
    <div>
        <h2 ref="titleRef">我是标题</h2>
    </div>
</template>

<script>
import { ref, watchEffect } from "vue"
export default {
    setup() {
        const titleRef = ref(null)  //与vue2中this.$ref.titleRef不一样,setup中没有this,要获取ref,需要定义ref对象绑定到元素或组件的ref属性就会自动赋值


        watchEffect(() => {
            console.log(titleRef.value);    //此处执行了两次,第一次是是挂载之前为null,第二次为挂载之后为ref元素
        })
        //如果想在挂载完再监听
        watchEffect(() => {
            console.log(titleRef.value);    //此处执行了两次,第一次是是挂载之前为null,第二次为挂载之后为ref元素
        }, {
            flush: "post"   //默认是pre
        })


        return {
            titleRef
        }
    }
}
</script>

<style lang="scss" scoped>
</style>